<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        .paper-item{
            margin: 0px auto;
            width: 1226px;
            height: 460px;
            text-align: center;
            position: relative;
            border: 1px solid red;
        }
        #prev{
            position: absolute;
            top: 50%;
        }
        #next{
            position: absolute;
            right: 0px;
            top: 50%;
        }
    </style>
</head>
<body onload="init()">
<div class="paper-item">
    <button id="prev" onclick="getPrev()">上一张</button>
    <img id="imgRotation" src="img/paper1.jpg" alt="" width="1226px" height="460px">
    <button id="next" onclick="getNext()">下一张</button>
</div>
<script>
    var index = 3;
    function getPrev() {
        index--;
        var ele = document.getElementById("imgRotation");
        //-- 通过JS来操作元素的样式
        if (index == 0){
            index = 5;
        }
        var path = "img/paper"+index +".jpg";
        console.log(index);
        ele.src = path;
    }
    function getNext() {
        index++;
        var ele = document.getElementById("imgRotation");
        //-- 通过JS来操作元素的样式
        if (index == 6){
            index = 1;
        }
        var path = "img/paper"+index +".jpg";
        console.log(index);
        ele.src = path;
    }
    function init() {
        setInterval("getNext()",4000);
    }
</script>
</body>
</html>